<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 连连看游戏系统</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        .register-container {
            max-width: 500px;
            margin: 0 auto;
        }
        
        .password-strength {
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .password-strength-bar {
            height: 100%;
            width: 0;
            transition: all 0.3s ease;
        }
        
        .strength-weak { 
            background: #f56c6c; 
            width: 33%; 
        }
        
        .strength-medium { 
            background: #e6a23c; 
            width: 66%; 
        }
        
        .strength-strong { 
            background: #67c23a; 
            width: 100%; 
        }
        
        .file-name {
            margin-top: 10px;
            color: #667eea;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="page-header">
        <h1>🎮 连连看游戏系统</h1>
        <p class="subtitle">注册账号，开启精彩游戏体验</p>
    </div>

    <div class="container">
        <div class="register-container">
            <div class="card">
                <h2 class="card-title">用户注册</h2>
                
                <div id="alertMessage" class="alert"></div>
                
                <form id="registerForm" enctype="multipart/form-data">
                    <!-- 头像上传 -->
                    <div class="form-group">
                        <label>头像</label>
                        <div class="avatar-preview" id="avatarPreview">
                            <img src="/static/images/default-avatar.png" alt="头像预览" id="previewImage">
                        </div>
                        <div class="file-upload-wrapper">
                            <input type="file" 
                                   id="avatarFile" 
                                   name="avatarFile" 
                                   class="file-upload-input"
                                   accept="image/*">
                            <label for="avatarFile" class="file-upload-label">
                                <span>📷 选择头像图片</span>
                            </label>
                        </div>
                        <div id="fileName" class="file-name"></div>
                    </div>
                    
                    <!-- 昵称 -->
                    <div class="form-group">
                        <label for="nickname">昵称 <span class="required">*</span></label>
                        <input type="text" 
                               id="nickname" 
                               name="nickname" 
                               class="form-control" 
                               placeholder="请输入昵称（2-20个字符）"
                               required
                               maxlength="20">
                    </div>
                    
                    <!-- 手机号 -->
                    <div class="form-group">
                        <label for="phone">手机号 <span class="required">*</span></label>
                        <input type="tel" 
                               id="phone" 
                               name="phone" 
                               class="form-control" 
                               placeholder="请输入11位手机号"
                               required
                               pattern="^1[3-9]\d{9}$">
                    </div>
                    
                    <!-- 密码 -->
                    <div class="form-group">
                        <label for="password">密码 <span class="required">*</span></label>
                        <input type="password" 
                               id="password" 
                               name="password" 
                               class="form-control" 
                               placeholder="请输入密码（6-20个字符）"
                               required
                               minlength="6"
                               maxlength="20">
                        <div class="password-strength">
                            <div class="password-strength-bar" id="strengthBar"></div>
                        </div>
                    </div>
                    
                    <!-- 确认密码 -->
                    <div class="form-group">
                        <label for="confirmPassword">确认密码 <span class="required">*</span></label>
                        <input type="password" 
                               id="confirmPassword" 
                               name="confirmPassword" 
                               class="form-control" 
                               placeholder="请再次输入密码"
                               required>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-block" id="registerBtn">
                        注册
                    </button>
                </form>
                
                <div class="text-center" style="margin-top: 20px;">
                    <span class="text-muted">已有账号？</span>
                    <a th:href="@{/user/login}" class="text-link">立即登录</a>
                </div>
            </div>
        </div>
    </div>

    <footer class="page-footer">
        <p>&copy; 2024 连连看游戏系统. All rights reserved.</p>
        <p>让游戏更有趣，让生活更精彩</p>
    </footer>

    <script>
        // 头像预览
        document.getElementById('avatarFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // 验证文件大小（2MB）
                if (file.size > 2 * 1024 * 1024) {
                    showAlert('头像文件不能超过2MB', 'error');
                    e.target.value = '';
                    return;
                }
                
                // 验证文件类型
                if (!file.type.startsWith('image/')) {
                    showAlert('请选择图片文件', 'error');
                    e.target.value = '';
                    return;
                }
                
                // 显示文件名
                document.getElementById('fileName').textContent = file.name;
                
                // 预览图片
                const reader = new FileReader();
                reader.onload = function(event) {
                    const preview = document.getElementById('avatarPreview');
                    const img = document.getElementById('previewImage');
                    img.src = event.target.result;
                    preview.classList.add('show');
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 密码强度检测
        document.getElementById('password').addEventListener('input', function(e) {
            const password = e.target.value;
            const strengthBar = document.getElementById('strengthBar');
            
            let strength = 0;
            if (password.length >= 6) strength++;
            if (password.length >= 10) strength++;
            if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
            if (/\d/.test(password)) strength++;
            if (/[^a-zA-Z0-9]/.test(password)) strength++;
            
            strengthBar.className = 'password-strength-bar';
            if (strength <= 2) {
                strengthBar.classList.add('strength-weak');
            } else if (strength <= 3) {
                strengthBar.classList.add('strength-medium');
            } else {
                strengthBar.classList.add('strength-strong');
            }
        });
        
        // 注册表单提交
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const nickname = document.getElementById('nickname').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            // 验证昵称
            if (nickname.length < 2 || nickname.length > 20) {
                showAlert('昵称长度应为2-20个字符', 'error');
                return;
            }
            
            // 验证手机号
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showAlert('请输入正确的手机号', 'error');
                return;
            }
            
            // 验证密码
            if (password.length < 6 || password.length > 20) {
                showAlert('密码长度应为6-20个字符', 'error');
                return;
            }
            
            // 验证确认密码
            if (password !== confirmPassword) {
                showAlert('两次输入的密码不一致', 'error');
                return;
            }
            
            const registerBtn = document.getElementById('registerBtn');
            registerBtn.disabled = true;
            registerBtn.innerHTML = '<span class="loading"></span> 注册中...';
            
            // 构建FormData
            const formData = new FormData();
            formData.append('nickname', nickname);
            formData.append('phone', phone);
            formData.append('password', password);
            formData.append('confirmPassword', confirmPassword);
            
            const avatarFile = document.getElementById('avatarFile').files[0];
            if (avatarFile) {
                formData.append('avatarFile', avatarFile);
            }
            
            // 发送注册请求
            fetch('/user/register', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    showAlert(data.message, 'success');
                    // 弹窗提示账号
                    alert('注册成功！您的账号是：' + data.data + '\n请牢记您的账号，稍后将跳转到登录页面');
                    setTimeout(() => {
                        window.location.href = '/user/login';
                    }, 2000);
                } else {
                    showAlert(data.message || '注册失败', 'error');
                    registerBtn.disabled = false;
                    registerBtn.innerHTML = '注册';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('网络错误，请稍后重试', 'error');
                registerBtn.disabled = false;
                registerBtn.innerHTML = '注册';
            });
        });
        
        // 显示提示信息
        function showAlert(message, type) {
            const alertDiv = document.getElementById('alertMessage');
            alertDiv.className = `alert alert-${type} show`;
            alertDiv.textContent = message;
            
            setTimeout(() => {
                alertDiv.className = 'alert';
            }, 5000);
        }
    </script>
</body>
</html>

